<template>
  <el-form ref="postForm" :model="postForm">
    <sticky
      :class-name=" `sub-navbar` "
    >
      <el-button
        v-if="!isEdit"
        @click="showGuide"
      >
        显示帮助
      </el-button>
      <el-button
        v-loading="loading"
        type="success"
        style="margin-left: 10px"
        @click="submitForm"
      >
        {{ isEdit ? "编辑电子书" : "新增电子书" }}
      </el-button>
    </sticky>

    <div class="detail-container">
      <el-row>
        <el-col :span="24">
          <warning />
          <!-- 表单控件的具体样式 -->

        </el-col>
        <ebook-upload />
        <!-- 上传组件控件的具体样式 -->
      </el-row>
    </div>
  </el-form>
</template>

<script>
import Sticky from '@/components/Sticky'
import Warning from '@/components/Warning'
import EbookUpload from '../../../components/EbookUpload'

export default {
  components: {
    Sticky,
    Warning,
    EbookUpload
  },
  props: {
    isEdit: Boolean
  },
  data() {
    return {
      isCollapse: false,
      loading: false,
      postForm: {
        status: 'draft'
      }
    }
  },
  methods: {
    showGuide() {
      console.log('show guide')
    },
    submitForm() {
      this.loading = true
      console.log('submitForm')
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/index.scss";

  .createPost-container {
    position: relative;

    .createPost-main-container {
      padding: 40px 45px 20px 50px;

      .preview-img {
        width: 200px;
        height: 270px;
      }

      .contents-wrapper {
        padding: 5px 0;
      }
    }
  }

  .detail-container {
    padding: 40px 50px 20px
  }
  </style>
